<template>
  <div class="news-list-page">
    <div class="page-container">
      <!-- 页面标题 -->
      

      <!-- 筛选和搜索 -->
      <div class="filter-section">
        <div class="filter-content">
          <!-- 类型筛选 -->
          <div class="type-filter">
            <el-radio-group v-model="queryParams.type" @change="handleFilterChange">
              <el-radio-button :label="undefined">全部</el-radio-button>
              <el-radio-button :label="1">活动</el-radio-button>
              <el-radio-button :label="2">资讯</el-radio-button>
              <el-radio-button :label="3">公告</el-radio-button>
            </el-radio-group>
          </div>

          <!-- 搜索框 -->
          <div class="search-filter">
            <el-input
              v-model="queryParams.keyword"
              placeholder="搜索资讯内容..."
              @keyup.enter="handleFilterChange"
              @clear="handleFilterChange"
              clearable
            >
              <template #append>
                <el-button @click="handleFilterChange" :icon="Search" />
              </template>
            </el-input>
          </div>
        </div>
      </div>

      <!-- 内容列表 -->
      <div class="content-section" v-loading="loading">
        <!-- 置顶资讯 -->
        <div class="top-section" v-if="!queryParams.keyword && !queryParams.type && topList.length > 0">
          <div class="section-header">
            <h2><el-icon><Top /></el-icon> 置顶资讯</h2>
          </div>
          <div class="top-grid">
            <div
              v-for="item in topList"
              :key="`top-${item.id}`"
              class="top-card"
              @click="$router.push(`/news/${item.id}`)"
            >
              <div class="card-image">
                <img :src="item.coverImage || '/default-news.jpg'" :alt="item.title" />
                <div class="top-badge">置顶</div>
                <div class="news-type" :class="`type-${item.type}`">
                  {{ getTypeText(item.type) }}
                </div>
              </div>
              <div class="card-content">
                <h3>{{ item.title }}</h3>
                <p>{{ item.summary }}</p>
                <div class="card-meta">
                  <span class="publish-time">{{ formatDate(item.publishTime || item.createTime) }}</span>
                  <div class="card-stats">
                    <span><el-icon><View /></el-icon> {{ item.viewCount }}</span>
                    <span><el-icon><StarFilled /></el-icon> {{ item.likeCount }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 推荐资讯 -->
        <div class="recommend-section" v-if="!queryParams.keyword && !queryParams.type && recommendList.length > 0">
          <div class="section-header">
            <h2><el-icon><Star /></el-icon> 推荐阅读</h2>
          </div>
          <div class="recommend-grid">
            <div
              v-for="item in recommendList"
              :key="`recommend-${item.id}`"
              class="recommend-card"
              @click="$router.push(`/news/${item.id}`)"
            >
              <div class="card-image">
                <img :src="item.coverImage || '/default-news.jpg'" :alt="item.title" />
                <div class="recommend-badge">推荐</div>
              </div>
              <div class="card-content">
                <div class="news-type" :class="`type-${item.type}`">
                  {{ getTypeText(item.type) }}
                </div>
                <h3>{{ item.title }}</h3>
                <p>{{ item.summary }}</p>
                <div class="card-meta">
                  <span class="author" v-if="item.author">{{ item.author }}</span>
                  <span class="publish-time">{{ formatDate(item.publishTime || item.createTime) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 资讯列表 -->
        <div class="news-list">
          <div class="list-header">
            <h2>
              <template v-if="queryParams.type">
                {{ getTypeText(queryParams.type) }}
              </template>
              <template v-else-if="queryParams.keyword">
                搜索结果
              </template>
              <template v-else>
                全部资讯
              </template>
            </h2>
            <span class="total-count">共 {{ total }} 条</span>
          </div>

          <!-- 无数据 -->
          <div class="no-data" v-if="!loading && newsList.length === 0">
            <el-empty description="暂无数据">
              <el-button type="primary" @click="clearFilters">清空筛选条件</el-button>
            </el-empty>
          </div>

          <!-- 数据列表 -->
          <div class="news-grid" v-if="newsList.length > 0">
            <div
              v-for="item in newsList"
              :key="item.id"
              class="news-card"
              @click="$router.push(`/news/${item.id}`)"
            >
              <div class="card-image">
                <img :src="item.coverImage || '/default-news.jpg'" :alt="item.title" />
                <div class="news-type" :class="`type-${item.type}`">
                  {{ getTypeText(item.type) }}
                </div>
              </div>
              <div class="card-content">
                <h3>{{ item.title }}</h3>
                <p>{{ item.summary }}</p>

                <!-- 活动信息 -->
                <div class="event-info" v-if="item.type === 1 && (item.eventStartTime || item.eventLocation)">
                  <div class="event-item" v-if="item.eventStartTime">
                    <el-icon><Calendar /></el-icon>
                    <span>{{ formatEventTime(item.eventStartTime, item.eventEndTime) }}</span>
                  </div>
                  <div class="event-item" v-if="item.eventLocation">
                    <el-icon><Location /></el-icon>
                    <span>{{ item.eventLocation }}</span>
                  </div>
                </div>

                <div class="card-meta">
                  <div class="meta-info">
                    <span class="author" v-if="item.author">{{ item.author }}</span>
                    <span class="source" v-if="item.source">{{ item.source }}</span>
                    <span class="publish-time">{{ formatDate(item.publishTime || item.createTime) }}</span>
                  </div>
                  <div class="card-stats">
                    <span><el-icon><View /></el-icon> {{ item.viewCount }}</span>
                    <span><el-icon><StarFilled /></el-icon> {{ item.likeCount }}</span>
                    <span><el-icon><Share /></el-icon> {{ item.shareCount }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <div class="pagination-container" v-if="total > 0">
            <el-pagination
              v-model:current-page="queryParams.page"
              v-model:page-size="queryParams.size"
              :total="total"
              :page-sizes="[12, 24, 48]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handlePageChange"
              @current-change="handlePageChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Search, Top, Star, View, Share, Calendar, Location, StarFilled
} from '@element-plus/icons-vue'
import { newsApi } from '@/api'
import type { News, NewsQuery } from '@/types/common'
import { NEWS_TYPES } from '@/types/common'

// 响应式数据
const loading = ref(false)
const newsList = ref<News[]>([])
const topList = ref<News[]>([])
const recommendList = ref<News[]>([])
const total = ref(0)

// 查询参数
const queryParams = reactive<NewsQuery>({
  page: 1,
  size: 12,
  keyword: '',
  type: undefined
})

// 获取置顶资讯
const fetchTopList = async () => {
  try {
    const response = await newsApi.getTopNews(3)
    topList.value = response.data
  } catch (error) {
    console.error('获取置顶资讯失败:', error)
  }
}

// 获取推荐资讯
const fetchRecommendList = async () => {
  try {
    const response = await newsApi.getRecommendNews(6)
    recommendList.value = response.data
  } catch (error) {
    console.error('获取推荐资讯失败:', error)
  }
}

// 获取资讯列表
const fetchNewsList = async () => {
  loading.value = true
  try {
    const response = await newsApi.getNewsPage({
      ...queryParams
    })
    newsList.value = response.data.list
    total.value = response.data.total
  } catch (error) {
    ElMessage.error('获取资讯列表失败')
    console.error('获取资讯列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 处理筛选变化
const handleFilterChange = () => {
  queryParams.page = 1
  fetchNewsList()
}

// 处理分页变化
const handlePageChange = () => {
  fetchNewsList()
}

// 清空筛选条件
const clearFilters = () => {
  queryParams.keyword = ''
  queryParams.type = undefined
  queryParams.page = 1
  fetchNewsList()
}

// 获取类型文本
const getTypeText = (type: number) => {
  return NEWS_TYPES[type as keyof typeof NEWS_TYPES] || '其他'
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) {
    return '今天'
  } else if (days === 1) {
    return '昨天'
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString('zh-CN')
  }
}

// 格式化活动时间
const formatEventTime = (startTime: string, endTime?: string) => {
  const start = new Date(startTime)
  const startStr = start.toLocaleDateString('zh-CN')

  if (endTime) {
    const end = new Date(endTime)
    const endStr = end.toLocaleDateString('zh-CN')

    if (startStr === endStr) {
      return startStr
    } else {
      return `${startStr} ~ ${endStr}`
    }
  }

  return startStr
}

onMounted(() => {
  fetchTopList()
  fetchRecommendList()
  fetchNewsList()
})
</script>

<style scoped>
.news-list-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-header {
  background: linear-gradient(135deg, #2196f3 0%, #42a5f5 100%);
  color: #fff;
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 24px;
  text-align: center;
}

.header-content h1 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 12px;
}

.header-content p {
  font-size: 16px;
  opacity: 0.9;
}

/* 筛选区域 */
.filter-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.filter-content {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.type-filter {
  flex: 1;
}

.search-filter {
  width: 300px;
}

/* 置顶区域 */
.top-section,
.recommend-section {
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
}

.top-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  border: 2px solid #ff9800;
}

.top-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.recommend-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  cursor: pointer;
  border: 1px solid #4caf50;
}

.recommend-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 卡片图片 */
.card-image {
  position: relative;
  overflow: hidden;
}

.top-card .card-image {
  height: 200px;
}

.recommend-card .card-image {
  height: 150px;
}

.news-card .card-image {
  height: 180px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.card-image:hover img {
  transform: scale(1.05);
}

/* 徽章样式 */
.top-badge,
.recommend-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.top-badge {
  background: linear-gradient(135deg, #ff9800, #ffc107);
}

.recommend-badge {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
}

.news-type {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.news-type.type-1 {
  background: #2196f3;
}

.news-type.type-2 {
  background: #4caf50;
}

.news-type.type-3 {
  background: #ff9800;
}

/* 卡片内容 */
.card-content {
  padding: 20px;
}

.recommend-card .card-content {
  padding: 16px;
}

.card-content h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.recommend-card .card-content h3 {
  font-size: 16px;
}

.card-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 活动信息 */
.event-info {
  background: #f0f8ff;
  border: 1px solid #e3f2fd;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.event-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #2196f3;
  margin-bottom: 4px;
}

.event-item:last-child {
  margin-bottom: 0;
}

.event-item .el-icon {
  font-size: 14px;
}

/* 卡片元信息 */
.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.meta-info {
  display: flex;
  gap: 12px;
}

.author,
.source,
.publish-time {
  position: relative;
}

.author::after,
.source::after {
  content: '|';
  margin-left: 6px;
  color: #ddd;
}

.card-stats {
  display: flex;
  gap: 12px;
}

.card-stats span {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 列表区域 */
.news-list {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.list-header h2 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.total-count {
  color: #666;
  font-size: 14px;
}

.no-data {
  text-align: center;
  padding: 40px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.news-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-color: #2196f3;
}

.pagination-container {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-container {
    padding: 16px;
  }

  .page-header {
    padding: 24px 20px;
  }

  .header-content h1 {
    font-size: 24px;
  }

  .filter-content {
    flex-direction: column;
    align-items: stretch;
  }

  .type-filter,
  .search-filter {
    width: 100%;
  }

  .top-grid {
    grid-template-columns: 1fr;
  }

  .recommend-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .card-meta {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .recommend-grid {
    grid-template-columns: 1fr;
  }
}
</style>
